<template>
  <!-- 列表主体 -->
  <el-table
    v-if='tableData'
    :data="tableData"
    border
    fit
    highlight-current-row
    style="width: 100%;"
  ><!--  -->
    <el-table-column label="项目" align="center">
      <template slot-scope="{row}">



        <span>{{ row.msg }}</span>
      </template>
    </el-table-column>
    <el-table-column label="记录值" prop="id" align="center">
      <template slot-scope="{row}">
        <div v-if='row.key=="edition"'>
          <el-select v-model="row.value" placeholder="活动区域" >
            <el-option label="开发版" :value="'0'"></el-option>
            <el-option label="线上版" :value="'1'"></el-option>
          </el-select>
        </div>

        <div v-if='row.key=="admin_token_die_tmie"'>
          <el-input-number v-model="row.value"  :min="1" >

          </el-input-number>

        </div>
        <div v-if='row.key=="user_token_die_time"'>
          <el-input-number v-model="row.value"  :min="1">

          </el-input-number>

        </div>

        <div v-if='row.key=="Company_name"'>
          <el-input v-model="row.value" >
          </el-input>
        </div>
        <div v-if='row.key=="image_update"'>
          <el-input v-model="row.value" >
          </el-input>
        </div>
        <div v-if='row.key=="back"'>
          <el-upload
            class="avatar-uploader"
            :action="lujing"
            :show-file-list="false"
            :on-success="img_handleSuccess"
            >
            <img v-if="row.value" :src="row.value" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if='row.key=="logo"'>
          <el-upload
            class="avatar-uploader"
            :action="lujing"
            :show-file-list="false"
            :on-success="img_handleSuccess2"
            >
            <img v-if="row.value" :src="row.value" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if='row.key=="package_cover"'>
          <el-upload
            class="avatar-uploader"
            :action="lujing"
            :show-file-list="false"
            :on-success="img_handleSuccess3"
            >
            <img v-if="row.value" :src="row.value" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if='row.key=="setmeal_cover"'>
          <el-upload
            class="avatar-uploader"
            :action="lujing"
            :show-file-list="false"
            :on-success="img_handleSuccess4"
            >
            <img v-if="row.value" :src="row.value" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <div v-if='row.key=="about_us"'>
          <Tinymce v-model="row.value"   />
          
          
        </div>





       <!-- {{ row.value }} -->
      </template>

    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="{row}">
        <el-button type="primary" @click='xgsj(row)'>保存</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
import { get_config_list ,update_config} from '@/api/user'
import Tinymce from '@/components/Tinymce'
export default {
  components: {  Tinymce },
  data() {
    return {
      tableData: null,
      lujing: JSON.parse(localStorage.getItem('Config'))['image_update']['value'],
    }
  },
  created() {
    this.get_index_data()
  },
  methods: {
    img_handleSuccess(response, file) {
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i]['key']=='back'){
          this.tableData[i]['value'] = response.data
          //this.xgsj(this.tableData[i])
          break
        }
      }

    },
    img_handleSuccess2(response, file) {
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i]['key']=='logo'){
          this.tableData[i]['value'] = response.data
          //this.xgsj(this.tableData[i])
          break
        }
      }

    },
    img_handleSuccess3(response, file) {
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i]['key']=='package_cover'){
          this.tableData[i]['value'] = response.data
          //this.xgsj(this.tableData[i])
          break
        }
      }

    },
    img_handleSuccess4(response, file) {
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i]['key']=='setmeal_cover'){
          this.tableData[i]['value'] = response.data
          //this.xgsj(this.tableData[i])
          break
        }
      }

    },
    xgsj(row){
       update_config({
            key:row.key,
            value:row.value
         }).then(res => {
             this.$message({
                message: '保存成功',
                type: 'success'
              });
         }).catch(() => {
           // alert('发生错误，请联系管理员。')
         })

    },
    get_index_data() {
      get_config_list({

      }).then(res => {
        console.log(res)
        this.tableData = res.data
      }).catch(() => {
        // alert('发生错误，请联系管理员。')
      })
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
